(function () {

    // 定时初始请求参数
    let shopid = 0
    let areaid = 0

    // 页面加载 上拉
    $('.from').hide()

    // 给 shop 添加点击事件
    $('.cityNav .shop').on('click', function () {
        $('.infoB').html('')
        // 点击切换
        $('.from').toggle()

        fetch('http://chst.vip:1234/api/getgsshop')
            .then(response => {
                return response.json()
            }).then(data => {
                let res = data.result
                let ele = '';
                res.forEach(item => {
                    ele += `
                        <li data-shopid="${item.shopId}">${item.shopName}</li>
                    `
                });

                $('.infoB').html(ele);


                // 给 infoB的 li添加点击事件
                $('.infoB li ').on('click', function () {
                    shopid = $(this).attr('data-shopid')
                    console.log(shopid);
                    $('.shop span').eq(0).html($(this).html())
                    $('.from').hide()

                    // return false   阻止事件冒泡
                    // 刷新请求数据
                    getRroduct(shopid, areaid)
                })

            });

    });

    // 给 place 添加点击事件
    $('.cityNav .place').on('click', function () {
        $('.infoB').html('')

        // 点击切换
        $('.from').toggle()
        fetch('http://chst.vip:1234/api/getgsshoparea')
            .then(response => {
                return response.json()
            }).then(data => {
                let res = data.result
                let ele = '';
                res.forEach(item => {
                    ele += `
                        <li data-areaid="${item.areaId}">${item.areaName}</li>
                    `
                });

                $('.infoB').html(ele);

                // 给 infoB的 li添加点击事件
                // 使用 on 不能阻止事件冒泡 这里必须用 click
                $('.infoB li').on('click', function () {
                    areaid = $(this).attr('data-areaid')
                    console.log(areaid);
                    $('.place span').eq(0).html($(this).html().slice(0, 2))
                    $('.from').hide()

                    // return false
                    // 刷新请求数据
                    getRroduct(shopid, areaid)
                })

            });
    });

    // 请求数据渲染商品列表
    function getRroduct(shopid, areaid) {

        fetch(`http://chst.vip:1234/api/getgsproduct?shopid=${shopid}&areaid=${areaid}`)
            .then(response => {
                return response.json()
            }).then(data => {
                let res = data.result
                console.log(res);
                let ele = ''
                res.forEach(item => {
                    ele += `
                        <li>
                            <a href="#">
                                <img src="${item.productImg}" alt="">
                                <div class="title">${item.productName}</div>
                                <div class="price">${item.productPrice}</div>
                            </a>
                        </li>
                    `
                });

                $('#product .info').html(ele)

            });
    }

    getRroduct(shopid, areaid)

})();